<template>
	<up-popup :show="show" mode="center" @close="show = false" :safeAreaInsetBottom="false">
		<view class="popup">
			<image class="popup-top-bj" src="@/static/image/popup-bj.png"></image>
			<view class="popup-content">
				<view class="title">
					评价
				</view>
				<view class="evaluate">
					<view class="text">评分</view>
					<up-rate :count="5" v-model="form.star" active-color="#FFD954" inactive-color="#D7D3D3"
						size="24"></up-rate>
				</view>
				<view class="textarea">
					<textarea v-model="form.content" maxlength="40" placeholder="请输入评价内容"
						placeholder-style="color: #D7D3D3"></textarea>
					<view class="num">
						{{ form.content.length }}/ 40
					</view>
				</view>
				<view class="upload-content">
					<template v-if="form.images.length==0 && form.video.length == 0">
						<view class="upload">
							<Upload :customStyle="4" @change="handleUpload" />
						</view>
					</template>
					<template v-if="form.images.length>0">
						<view class="upload" v-for="(item, index) in 3" :key="index">
							<Upload :customStyle="2" :url="form.images[index]" @change="handleUpload($event, index)" />
						</view>
					</template>
					<template v-if="form.video">
						<view class="upload">
							<Upload :customStyle="4" :url="form.video" @change="handleUpload" />
						</view>
					</template>
				</view>
				<view class="popup-bottom">
					<view class="">
						<up-button @click="show = false" type="info" text="取消"></up-button>
					</view>
					<view class="">
						<up-button @click="handleSumbit" type="primary" text="确定"></up-button>
					</view>
				</view>
			</view>
		</view>
	</up-popup>
</template>

<script setup>
	import Upload from '@/components/Upload.vue'
	import {
		ref
	} from 'vue'
	import order from '@/api/order.js'
	import utils from '@/utils/util.js'
	const props = defineProps({
		id: {
			type: [Number, String],
			default: 0
		}
	})
	const show = ref(false)
	const handleClick = () => {
		show.value = true
	}
	defineExpose({
		handleClick
	})
	const form = ref({
		images: [],
		video: '',
		content: '',
		star: ''
	})
	const handleUpload = (e, index) => {
		if (!e) {
			if (index >= 0) {
				form.value.images[index] = ''
				let type = true
				form.value.images.forEach(item => {
					if (item) type = false
				})
				if (type) form.value.images = []
			} else {
				form.value.video = ''
			}
			return
		}
		if (e.type == 'image') {
			form.value.images[0] = e.src
		} else if (e.type == 'video') {
			form.value.video = e.src
		} else {
			form.value.images.push(e)
		}
	}
	const emits = defineEmits(['change'])
	const handleSumbit = async () => {
		const {
			status,
			info,
			data
		} = await order.userCommentOrder({
			id: props.id,
			...form.value
		})
		utils.toast(info)
		if (status == 1) {
			show.value = false
			emits('change')
		}
	}
</script>

<style lang="scss" scoped>
	.popup-content {
		.evaluate {
			display: flex;
			align-items: center;

			.text {
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 28rpx;
				color: #A6A1A1;
				line-height: 33rpx;
			}
		}

		.textarea {
			border-radius: 20rpx;
			border: 1px solid #E9E9E9;
			height: 184rpx;
			padding: 20rpx;
			margin: 20rpx 0;

			textarea {
				width: 100%;
				margin-bottom: 20rpx;
				height: 150rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 28rpx;
				line-height: 33rpx;
			}

			.num {
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 20rpx;
				color: #D7D3D3;
				line-height: 23rpx;
				text-align: right;
			}
		}

		.upload-content {
			display: flex;
			justify-content: space-between;
			margin: 20rpx 0;

			.upload {
				width: calc((100vw - 102rpx - 80rpx) / 3);
				height: calc((100vw - 102rpx - 80rpx) / 3);
			}

			.i {
				width: calc((100vw - 102rpx - 80rpx) / 3);
			}
		}
	}
</style>